<template>
  <div class="annualbox">
    <div style="display: flex; align-items: center" v-show="isshowtype == 0">
      <el-input
        v-model="listquery.key"
        placeholder="模糊搜索"
        style="width: 200px"
        class="marright"
        clearable
      ></el-input>
      <el-select
        v-model="listquery.areaType"
        placeholder="级别"
        class="marright"
        clearable
      >
        <el-option
          v-for="item in areatypes"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
         <el-select
        v-model="listquery.year"
        placeholder="年度"
        class="marright"
        clearable
      >
        <el-option
          v-for="item in yearlist"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      


      <el-select
        placeholder="所属市"
        v-model="listquery.city"
        clearable
        class="marright"
      >
        <el-option
          v-for="item in citylist1"
          :key="item.id"
          :label="item.label"
          :value="item.label"
        />
      </el-select>
      <el-button type="success" icon="el-icon-search" @click="search"
        >搜索</el-button
      >
      <el-button type="warning" icon="el-icon-refresh-left" @click="reset"
        >重置</el-button
      >
    </div>
    <el-dialog
      title="年度总结报告"
      :visible.sync="isDialogShow"
      width="30%"
      :append-to-body="true"
      class="dialog1"
      @close="uploadreports"
    >
      <el-upload
        ref="uploadword"
        class="upload-demo"
        action=""
        :show-file-list="true"
        :limit="1"
        :http-request="unitLinkmore"
        :file-list="word"
        accept=".doc, .docx"
      >
        <el-button type="success" plain icon="el-icon-tickets"
          >上传word</el-button
        >
      </el-upload>
      <el-upload
        class="upload-demo"
        ref="uploadpdf"
        action=""
        :show-file-list="true"
        :file-list="pdf"
        :http-request="unitLinkmore1"
        :multiple="false"
        :limit="1"
        accept=".pdf"
      >
        <el-button type="warning" plain icon="el-icon-s-marketing" class="mar"
          >上传pdf</el-button
        >
      </el-upload>
      <el-date-picker
        v-model="yearSelect"
        type="year"
        class="mar"
        placeholder="选择年度"
      >
      </el-date-picker>
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadreports">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>

    <el-button
      type="primary"
      icon="el-icon-link"
      @click="isDialogShow = true"
      v-show="isshowtype == 1"
      >上传年度总结报告</el-button
    >

    <el-table :data="tableData" style="width: 100%" class="eltable">
      <el-table-column label="序号" width="100" prop="id">
        <template slot-scope="{ $index }">
          <span>{{ $index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="区域" width="200" prop="area" />
      <el-table-column label="年度" width="150" prop="year" />
      <el-table-column label="word文件">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="点击下载"
            placement="bottom"
          >
            <a :href="scope.row.word" class="aaa">{{
              scope.row.word.substring(scope.row.word.lastIndexOf("/") + 1)
            }}</a>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="pdf文件">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="点击下载"
            placement="bottom"
          >
            <a :href="scope.row.pdf" target="_bank" download="" class="aaa">{{
              scope.row.pdf.substring(scope.row.pdf.lastIndexOf("/") + 1)
            }}</a>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
      <el-pagination
        v-if="tableData.length > 0"
        class="elpagi"
        :total="total"
        @size-change="getData"
        @current-change="getData"
        @prev-click="getData"
        @next-click="getData"
        :current-page.sync="listquery.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="listquery.pageSize"
        layout="total,sizes, prev, pager, next, jumper"
      />
  </div>
</template>
<script>
import { picHost } from "@/settings.js";
import { getreportlist, uploadreport } from "@/api/town.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      listquery: {
        key: "",
        pageSize: 10,
        currentPage: 1,
        areaType: null, //市级还是县级
        userId: null,
        year:null,
        city: "", // 具体哪个市的县
      },
      yearlist:["2022","2023","2024","2025","2026"],
      total: 0,
      areatypes: [
        { label: "市级", value: "city" },
        { label: "县区级", value: "country" },
      ],
      isshowtype: 0,
      tableData: [],
      isloading: true,
      isDialogShow: false,
      yearSelect: null,
      word: [],
      pdf: [],
      citylist1: [],
    };
  },
  computed: {
    ...mapGetters(["citylist"]),
  },
  created() {
   
    if (this.$router.currentRoute.name == "townuploadreports") {
      this.isshowtype = 1;
      this.listquery.userId = this.$store.getters.user.id;
    }else{
      this.listquery.year=2023
    }

    this.getData();
    this.citylist.forEach((element) => {
      if (element.label != "湖南省") {
        this.citylist1.push(element);
      }
    });
  },
  watch: {
    $route(newval,oldval){
          if (this.$router.currentRoute.name == "townuploadreports") {
            this.isshowtype = 1;
            this.listquery.userId = this.$store.getters.user.id;
          }
          this.getData();
      }
  },
  methods: {
    uploadreports(){
      this.word=[]
      this.pdf=[]
      this.yearSelect=null
      this.isDialogShow=false
    },
    async getData() {
      this.isloading = true;
      let res = await getreportlist(this.listquery);
      if (res.success) {
        this.tableData = res.data.content;
        this.tableData.forEach((element) => {
          element.word = picHost + element.word;
          element.pdf = picHost + element.pdf;
        });
      
          this.total = res.data.totalElements;
          this.isloading = false;
      } else {
        this.tableData = [];
      }
    },
    search() {
      this.listquery.currentPage = 1
         this.listquery.pageSize=10
      this.getData();
    },
    reset() {
      this.listquery = {
        key: "",
        pageSize: 10,
        currentPage: 1,
        year: null,
        areaType: null, //市级还是县级
        userId: null,
        city: "", // 具体哪个市的县
      };
    },

    submitUpload() {
      if (
        this.word.length == 0 ||
        this.pdf.length == 0 ||
        this.yearSelect == null
      ) {
        this.$message.error("请将材料补充齐全");
        return;
      }

      let datafile = new FormData();
      datafile.append("word", this.word[0]);
      datafile.append("pdf", this.pdf[0]);
      datafile.append("year", this.yearSelect.getFullYear());
      uploadreport(datafile).then((v) => {
        if (v.success) {
          this.$notify({
            title: "成功",
            message: "上传成功",
            type: "success",
          });
          this.uploadreports();
          this.getData();
            
        } else {
          this.$notify({
            title: "失败",
            message: v.message,
            type: "error",
          });
        }
      });
      this.isDialogShow = false;
    },
    unitLinkmore(data) {
      this.word.push(data.file);
    },
    unitLinkmore1(data) {
      this.pdf.push(data.file);
    },
  },
};
</script>
<style scoped>
  .elpagi {
    margin-top: 10px;
    text-align: left;
    padding-right: 10px;
  }
.annualbox {
  margin: 10px;
}
.mar {
  margin-top: 10px;
}
.aaa:hover {
  color: blue;
}
.marright {
  margin-right: 10px;
}
</style>
